<template>
	<a-list item-layout="horizontal" :data-source="data">
		<template #renderItem="{ item }">
			<a-list-item>
				<a-list-item-meta class="list-item-meta">
					<template #title>{{ item.title }}</template>
					<template #description>
						<span class="security-list-description">{{ item.value ? item.description : item.nullDescription }}</span>
						<span class="security-list-value">{{ item.value }}</span>
					</template>
					<template #avatar>
						<KeyOutlined v-if="item.type === 'power'" class="bind-icon" :style="{ color: '#1890FF' }" />
						<PhoneOutlined v-if="item.type === 'phone'" class="bind-icon" :style="{ color: '#1890FF' }" />
						<MailOutlined v-if="item.type === 'email'" class="bind-icon" :style="{ color: '#1890FF' }" />
						<!-- <qq-outlined v-if="item.type === 'qq'" class="bind-icon" :style="{ color: '#1890FF' }" />
						<wechat-outlined v-if="item.type === 'weChat'" class="bind-icon" :style="{ color: '#1AAD19' }" />
						<alipay-circle-outlined v-if="item.type === 'AliPay'" class="bind-icon" :style="{ color: '#178bf5' }" />
						<GiteeIcon style="width: 40px" v-if="item.type === 'Gitee'" class="bind-icon" /> -->
					</template>
				</a-list-item-meta>
				<template #actions>
					<a @click="bindCommon(item.type, item.value)">{{ item.value ? '修改' : '去绑定' }}</a>
				</template>
			</a-list-item>
		</template>
	</a-list>
	<updatePassword ref="updatePasswordRef" @successful="onSuccess('power', $event)" />
	<updatePhone ref="updatePhoneRef" @successful="onSuccess('phone', $event)" />
	<updateEmail ref="updateEmailRef" @successful="onSuccess('email', $event)" />
</template>

<script setup>
	import { message } from 'ant-design-vue'
	import updatePassword from './bindForm/updatePassword.vue'
	import updatePhone from './bindForm/updatePhone.vue'
	import updateEmail from './bindForm/updateEmail.vue'
	import userCenterApi from '@/api/sys/userCenterApi'
	import tool from '@/utils/tool'
	import { globalStore } from '@/store'

	const store = globalStore()
	const updatePasswordRef = ref()
	const updatePhoneRef = ref()
	const updateEmailRef = ref()
	// 获取用户信息
	const userInfo = tool.data.get('USER_INFO')
	// 获取绑定的情况
	const data = reactive([
		{
			title: '密码强度',
			description: '当前密码强度 : ',
			nullDescription: '无密码',
			value: '',
			type: 'power',
			bindStatus: 0
		},
		{
			title: '密保手机',
			description: '已绑定手机 : ',
			nullDescription: '未绑定手机',
			value: '',
			type: 'phone',
			bindStatus: 1
		},
		{
			title: '密保邮箱',
			description: '已绑定邮箱 : ',
			nullDescription: '未绑定邮箱',
			value: '',
			type: 'email',
			bindStatus: 0
		}
	])

	onMounted(() => {
		// 进来后执行查询
		getUserLoginWorkbench()
	})

	const getUserLoginWorkbench = () => {
		const param = {
			Account: userInfo.account
		}
		userCenterApi.AccountRelevancyInfo(param).then((res) => {
			if (res) {
				for (let key in res) {
					const has = data.find((x) => x.type == key)
					if (has) has.value = res[key]
				}
			}
		})
	}

	const refresh = () => {
		// 更新前端缓存
		store.setUserInfo(userInfo)
		tool.data.set('USER_INFO', userInfo)
	}

	const onSuccess = (key, newValue) => {
		const item = data.find((x) => x.type == key)
		switch (key) {
			case 'power':
				// 修改密码后重新获取绑定值
				getUserLoginWorkbench()
				break
			case 'phone':
				if (item) item.value = newValue
				userInfo.phone = newValue
				refresh()
				break
			case 'email':
				if (item) item.value = newValue
				userInfo.email = newValue
				refresh()
				break
			default:
				message.info('开发中')
				break
		}
	}

	const bindCommon = (key, value) => {
		switch (key) {
			case 'power':
				updatePasswordRef.value.onOpen()
				break
			case 'phone':
				updatePhoneRef.value.onOpen()
				break
			case 'email':
				updateEmailRef.value.onOpen(value)
				break
			default:
				message.info('开发中')
				break
		}
	}
</script>

<style scoped>
	.list-item-meta {
		align-items: center;
	}
	.bind-icon {
		padding-left: 10px;
		font-size: 16px;
		padding-bottom: 24px;
	}
</style>
